<script setup>
import {ref} from "vue";
import {addQuestion, getQuestionById, updateQuestion} from "@/api/question.js";
import {ElMessage} from "element-plus";
import {getTags, getTagsByTags} from "@/api/tag.js";

const drawer = ref(false);

const judgeAddOrUpdate = ref(true);

const title = ref('');

const tags = ref({value: []});
const tagsStr = ref('');

const forms = ref([{input: '', output: ''}]);
const timeLimit = ref(1000);
const memoryLimit = ref(1000);

const initParam = ref({
  id: 0,
  title: '',
  content: '',
  tags: tagsStr,
  judgeConfig: {
    timeLimit: timeLimit,
    memoryLimit: memoryLimit,
  },
  judgeCase: forms
})

const ruleForm = ref({
  id: 0,
  title: '',
  content: '',
  tags: tagsStr,
  judgeConfig: {
    timeLimit: timeLimit,
    memoryLimit: memoryLimit,
  },
  judgeCase: forms
})


const open = async (row) => {
  drawer.value = true;
  if (typeof (row) == "undefined") {
    ruleForm.value = initParam.value
    const tags = {value: []}
    forms.value = [{input: '', output: ''}]
    timeLimit.value = 1000
    memoryLimit.value = 1000

    judgeAddOrUpdate.value = true;
    title.value = "添加题目"
    await getTagss();
  } else {
    judgeAddOrUpdate.value = false;
    title.value = "编辑题目"
    // 发送请求
    const res = await getQuestionById(row.id);
    const result = res.data.data;
    ruleForm.value.id = row.id;
    ruleForm.value.title = result.title;
    ruleForm.value.content = result.content;
    forms.value = result.judgeCase;
    timeLimit.value = result.judgeConfig.timeLimit;
    memoryLimit.value = result.judgeConfig.memoryLimit;
    await getTagsByChecked(row.tags);
  }
}

const getTagss = async () => {
  const res = await getTags(0);
  tags.value = res.data.data;
  tags.value = tags.value.map(item => {
    return {...item, checked: false}
  })
}

const getTagsByChecked = async (tagsStr) => {
  const res = await getTagsByTags(0, tagsStr);
  console.log(res.data.data)
  tags.value = res.data.data;
  console.log("看看")
  console.log(tags.value)
  // tags.value = tags.value.map(item => {
  //   return {...item}
  // })
}

defineExpose({
  open
})

const addForm = () => {
  forms.value.push({input: '', output: ''});
};

const deleteForm = (index) => {
  forms.value.splice(index, 1);
};

const submitForm = async () => {

  const filteredArray = tags.value.filter((obj) => obj.checked === true);
  const names = filteredArray.map((obj) => obj.id);
  names.join(",");
  tagsStr.value = names.toString();

  if (judgeAddOrUpdate.value) {
    // 添加
    const res = await addQuestion(ruleForm.value)
    ElMessage.success(res.data.message)
    await getTagss();
  } else {
    //修改
    const res = await updateQuestion(ruleForm.value)
    ElMessage.success(res.data.message)
  }
  drawer.value = false;
  location.reload();

}

const onchanged = (item) => {
  item.checked = !item.checked
}

const resetForm = ()=>{
  ruleForm.value = initParam.value
  forms.value = [{input: '', output: ''}]
  timeLimit.value = 1000
  memoryLimit.value = 1000
}

</script>

<template>
  <!--    抽屉-->
  <el-drawer
      v-model="drawer"
      :title="title"
      size="100%"
  >
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
    >
      <el-form-item label="题目标题" prop="pass">
        <el-input v-model="ruleForm.title" type="text" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="题目内容" prop="checkPass">

        <v-md-editor v-model="ruleForm.content" height="400px">
        </v-md-editor>
      </el-form-item>
      <el-form-item label="题目标签">
        <el-checkbox v-for="item in tags" :checked="item.checked" :key="item.id" :label="item.tagName" size="large"
                     @click="onchanged(item)"/>
      </el-form-item>

      <el-form-item label="判题用例" prop="age">
        <div class="form-container">
          <div class="form-group" v-for="(form, index) in forms" :key="index">
            <el-input v-model="form.input" placeholder="输入用例"></el-input>
            <el-input v-model="form.output" placeholder="输出用例"></el-input>
            <el-button @click="deleteForm(index)" type="danger" icon="el-icon-delete"></el-button>
          </div>
          <el-button @click="addForm" type="primary">
            <i class="el-icon-plus"></i> 添加表单
          </el-button>
        </div>
      </el-form-item>

      <el-form-item label="判题限制">
        <div class="container">
          <div class="item">
            <div class="label">时间限制 (s)</div>
            <div class="input-wrapper">
              <el-input v-model="timeLimit" type="number" class="input-with-btn"></el-input>
            </div>
          </div>
          <div class="item">
            <div class="label">内存限制 (kb)</div>
            <div class="input-wrapper">
              <el-input v-model="memoryLimit" type="number" class="input-with-btn"></el-input>
            </div>
          </div>
        </div>
      </el-form-item>
      <!--      <div v-for="(form, index) in forms" :key="index" class="form-group">-->
      <!--        <el-input v-model="form.input" placeholder="输入用例"></el-input>-->
      <!--        <el-input v-model="form.output" placeholder="输出用例"></el-input>-->
      <!--        <el-button @click="deleteForm(index)" type="danger" icon="el-icon-delete"></el-button>-->
      <!--      </div>-->
      <!--      <el-button @click="addForm" type="primary">添加表单</el-button>-->
      <el-form-item>
        <el-button type="primary" @click="submitForm()"
        >提交
        </el-button
        >
        <el-button @click="resetForm()">清空</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

</template>

<style scoped>

.form-container {
  margin: 20px;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.el-button i {
  margin-right: 5px;
}

/*美化限制*/
.input-with-btn {
  margin-right: 40px;
}

.custom-btn span {
  font-size: 18px;
}

.custom-btn:hover span {
  color: #333;
}
</style>
